<template>
    <div id="container">
        <!-- S 数据展示 -->
        <div class="company-title">{{decodeURI(resData.companyInfo.companyName)}}</div>
        <ul class="item-table">
          <li v-for="(item, i) in resData.workShopList" >
            <!-- S 部门名称 -->
            <div class="title item-title title-font-size">
              <span>{{item.name}}</span>
              <div class="pwd-box">
                <i class="edit-icon" @click="edit(item, i)"></i>
              </div>
            </div>
            <!-- E 部门名称 -->
            <!-- S 班组列表 -->
            <div class="sub-items-container">
              <div v-for="(subItem, j) in item.teamList" >
                <div class="title sub-item-title title-font-size">
                  <span>{{subItem.name}}</span>
                  <div class="pwd-box">
                    <span class="pwd-box-text" v-if="subItem.password && subItem.password.length>0">{{subItem.password}}</span>
                    <span class="pwd-box-text" v-else><span style="padding: .3rem .38rem;color:#dcdcdc;">空</span></span>
                    <i class="edit-icon" @click="edit(subItem, i,j)"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- E 班组列表 -->
          </li>
        </ul>
        <!-- E 数据展示 -->
      <div class="apply-pwd-btn"><a href="javascript:void(0)" @click="toPasswordGenerate">申请新口令</a></div>
    </div>
</template>

<script>
  import { apiConstants, loadModalInfo, loadMessageBoxModal} from '@/js/utils'
  import popup  from 'ssit-mobile-popup'
  export default {
    name: "companyList",
    components: {popup},
    props:['resData'],
      data(){
        return {
          show: false,
          newInputValue:""
        }
      },
      created(){
      },
      mounted(){
      },
      methods:{
        edit(val, i, j){
          let _this = this;
          loadMessageBoxModal("<div style='font-size:.32rem;padding:.40rem 0;text-align: center;'>修改名称</div>" +
            "<p style='margin:0 0 .56rem;text-align: center;display:flex;'>" +
            "<input id='inputValue' value='"+val.name+"' style='background: #F5F6F8;border-radius: .14rem;border: none;text-align: center;font-size: .32rem;padding: .28rem 0;margin: 0 .3rem;flex: 1;'/>" +
            "</p>",
            "确认保存吗", () => {
              _this.$ajax(apiConstants.company_editWorkShopOrTeamName, {
                data:{id:val.id, name:document.getElementById("inputValue").value},
                success: function (data) {
                  if(j === undefined){
                    _this.resData.workShopList[i].name = document.getElementById("inputValue").value;
                  }else{
                    _this.resData.workShopList[i].teamList[j].name = document.getElementById("inputValue").value;
                  }
                  _this.$Message({
                    content: "修改成功",
                    time: 1500,
                    type: "default",
                    hasClose: true
                  });
                },
                fail: function (err) {
                  loadModalInfo(err.message);
                }
              })
            },  ()=>{}, "确定");
        },
        toPasswordGenerate(){
          location.href = "/password/generate?id="+this.resData.companyInfo.id+"&companyName="+this.resData.companyInfo.companyName;
        },
        test(obj){
          resData.workShopList
        }
      }
  }
</script>

<style lang="scss" scoped>
  ul{padding:0;margin:0;}
  #container{
    margin: 0 .3rem;
    .company-title{
      text-align: center;
      margin: .4rem .86rem;
      font-size: .36rem;
      color: #333333;
      font-weight: 600;
    }
    .item-table{
      border-top: 1px solid #E9E9E9;
      border-left: 1px solid #E9E9E9;
      border-right: 1px solid #E9E9E9;
      border-radius: .14rem;
    }
    ul li{
      list-style:none;
      .item-title{
        padding: .3rem;
        background-color: #e9e9e940;
        border-bottom: 1px solid #E9E9E9;
        span{
        }
      }
    }
  }
  .apply-pwd-btn>a{

  }
  .edit-icon{
    display: inline-block;
    width: .3733rem;
    height: .3733rem;
    background: red;
    background: url(/images/password/edit.png) center no-repeat;
    background-size: contain;
  }
  .title-font-size{
    font-size: .32rem;
  }
  .sub-item-title{
    padding: .3rem;
    border-bottom: 1px solid #E9E9E9;
  }
  i{
    vertical-align: bottom;
  }
  .pwd-box{
    display: inline-block;
  }
  .title{
    position: relative;
  }
  .pwd-box{
    .pwd-box-text {
      font-size: .32rem;
      color: #3C6EFF;
      border-left: 1px solid #E9E9E9;
      padding: .3rem 0.2rem;
      border-right: 1px solid #E9E9E9;
      margin-right: .2rem;
    }
    position: absolute;
    right: .3rem;
  }
  .apply-pwd-btn{
    text-align: center;
    margin-top: 1.02rem;
    margin-bottom: 1.02rem;
    a{
      text-decoration: none;
      font-size: .32rem;
      color: white;
      padding: .28rem 2.02rem;
      border-radius: .49rem;
      background-color: #3C6EFF;
      display: inline-block;
    }
  }
 /* modal */
  .modal{

  }
  .modal-btns{
    .cancel-btn{

    }
    .ok-btn{

    }
  }
</style>
